<template>
	<view class="album-item">
		<!-- 中间主体 -->
		<view class="album-item-content u-flex">
			<!-- 左侧图片 -->
			<img :src="detail.img" alt="" mode="widthFix" class="detail-img"  :class="{'detail-img-small':size=='small'}">
			<!-- 右侧信息 -->
			<view class="album-item-right" :class="{'album-item-right-small':size=='small'}">
				<view class="name u-line-1">
					{{detail.name}}
				</view>
				<view class="desc u-line-1" v-if="descShow">
					简介:{{detail.desc}}
				</view>
				<view class="photo-num">
					照片:{{detail.photoNum}}
				</view>
				<view class="photo-num">
					创建时间:{{detail.createTime}}
				</view>
			</view>
		</view>
		<!-- 右上角 -->
		<view class="more-options">
			
		</view>
		<!-- 底部操作 -->
		<view class="options">
			<slot></slot>
		</view>
	</view>
</template>

<script>
/**
 * 相册卡片
 * @property {Object} detail - 相册明细
 */
export default {
	components: {},
	data() {
		return {
			
		};
	},
	props: {
		detail: {
			type: Object,
			default: () => {}
		},
		// normal small 
		size: {
			type: String,
			default: () => 'normal'
		},
		descShow: {
			type: Boolean,
			default: () => true
		}
	},
	created() {},
	computed: {
		
	},
	methods: {

	}
};
</script>

<style lang="scss" scoped>
.album-item {
	width: 100%;
	background: #FFFFFF;
	border-radius: 8px 8px 8px 8px;
	padding: 24rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	.album-item-content {
		font-size: 24rpx;
		color: #999999;
		vertical-align: middle;
		.detail-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0;
			padding: 0;
		}
		.detail-img-small {
			width: 176rpx;
			height: 176rpx;
		}
		.album-item-right {
			width: calc(100% - 220rpx);
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			.name {
				width: 100%;
				margin-top: 10rpx;
				font-weight: bold;
				color: #42494F;
				font-size: 32rpx;
			}
		}
		.album-item-right-small {
			height: 176rpx;
			width: calc(100% - 176rpx);
		}
	}
	
	.options {
		margin-top: 30rpx;
		height: 70rpx;
		padding-bottom: 6rpx;
		width: 100%;
	}
}
</style>
